<template>
  <div>

    <el-container>
  <el-header>
    <div class="header_left">
      <img src="http://likede2-admin.itheima.net/img/logo.3673fab5.png" alt=""></div>
    <div class="header_right">
       <div class="user">
      <div class="user_img">
        <el-avatar>
        <img src="" alt=""></el-avatar></div>
           <div class="user_font">
             <span>欢迎你,{{$store.state.user.username}}</span>
             <el-tooltip class="item" effect="dark" content="退出登录" placement="top-start">
<span class="logout" @click="lougout">退出<i class="el-icon-caret-bottom"></i></span>
    </el-tooltip>
           </div>
          </div>
    </div>
  </el-header>
  <!-- 侧边栏 -->
  <el-container>
    <el-aside width="150px" >
      <el-menu :default-openeds="['1', '8']" >
        <el-menu-item ><i class="iconfont icon-shouye" @click="$router.push('/home')"></i>帝可得</el-menu-item>
      <el-submenu index="1" >
        <template slot="title"><i class="el-icon-document-copy"></i>工单管理</template>
          <el-menu-item index="1-1" @click="$router.push('/pocessorder')">运营工单</el-menu-item>
          <el-menu-item index="1-2">运维工单</el-menu-item>

      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-place"></i>点位管理</template>
          <el-menu-item index="2-1">区域管理</el-menu-item>
          <el-menu-item index="2-2">点位管理</el-menu-item>
          <el-menu-item index="2-3">合作商管理</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>设备管理</template>
          <el-menu-item index="3-1">设备管理</el-menu-item>
          <el-menu-item index="3-2">状态管理</el-menu-item>
          <el-menu-item index="3-3">设备类型管理</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title"><i class="el-icon-s-custom"></i>人员管理</template>
          <el-menu-item index="4-1">人员列表</el-menu-item>
          <el-menu-item index="4-2">人效数据</el-menu-item>
           <el-menu-item index="4-3">工作量列表</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title"><i class="el-icon-setting"></i>商品管理</template>
          <el-menu-item index="5-1">商品类型</el-menu-item>
          <el-menu-item index="5-2">商品管理</el-menu-item>
      </el-submenu>
    <el-menu-item ><i class="iconfont icon-diandeng"></i>策略管理</el-menu-item>
        <el-menu-item ><i class="el-icon-notebook-1"></i>订单管理</el-menu-item>
            <el-menu-item ><i class="el-icon-tickets"></i>对账管理</el-menu-item>
    </el-menu>
    </el-aside>
    <!-- 路由出口 -->
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
  data () {
    return {
    }
  },
  methods: {
    lougout () {
      this.$store.commit('user/logout')
      this.$router.push('/login')
      Message.success('退出成功')
    }
  }
}
</script>

<style lang="scss" scoped>

.el-aside {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 1000px;
    margin-top: 60px;
i{
  font-size: 20px;
}
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;

  }
   .el-header {
    color: #333;
    text-align: center;
    line-height: 60px;
    background-image: url();
    background-size: cover;
    background-repeat: no-repeat;
     height: 60px;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1999;
    display: flex;
    justify-content: space-between;
    .header_left{
  width: 88px;
  height: 36px;
   margin-top: 6px;
  margin-left: 15px;
  img{
width: 100%;
  }
}
  }
  .user{
    display: flex;
    justify-content: space-around;
    width: 300px;
    height: 60px;
    .user_font{
    span{
    color: #fff;
    font-size: 16px;

  }
  .logout{
    padding-left:18px ;
  }
    }

  .user_img{
  display: inline-block;
  margin-top: 10px;
  margin-right: -30px;
  }
  }

</style>
